<template>
    <div style="margin: auto;width: 97%">
        <!--头部搜索-->
        <div class="top" v-if="topInputShow">
            <el-form ref="form" class="form" label-width="100px" style="
      width: 100%;display:flex;margin: 20px 0px 0px;">
                <el-form-item label="岗位编码">
                    <el-input v-model="postCode" placeholder="请输入岗位编码"></el-input>
                </el-form-item>
                <el-form-item label="岗位名称">
                    <el-input v-model="postName" placeholder="请输入岗位名称"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                    <el-select placeholder="岗位状态" v-model="status">
                        <el-option :label="item.dictLabel" :value="item.dictValue" v-for="item in stateDictList"></el-option>
                    </el-select>
                </el-form-item>
                <div style="margin-left: 20px;margin-top: 5px">
                    <el-button type="success" size="small" icon="el-icon-search" @click="loadPost(1)">搜索</el-button>
                    <el-button size="small" icon="el-icon-refresh" @click="toIndex">重置</el-button>
                </div>
            </el-form>
        </div>
        <el-row
            class="btn">
            <el-button icon="el-icon-plus" type="primary" size="mini" @click="addPost(),dialogPostVisible=true">新增</el-button>
            <el-button icon="el-icon-edit" @click="selectUpdate" type="success" size="mini"  :disabled="multiple">修改</el-button>
            <el-button icon="el-icon-delete" @click="deleteRoles" type="danger" size="mini" :disabled="multiple">删除
            </el-button>

            <el-button icon="el-icon-download" type="warning" @click="outExe" size="mini">导出</el-button>
        </el-row>
        <el-row
            class="btn-circle">
            <div>
                <a-tooltip>
                    <template slot="title">
                        <!--            隐藏搜索-->
                    </template>
                    <el-button size="small" icon="el-icon-search" circle @click="topInputShows"></el-button>
                </a-tooltip>
                <a-tooltip>
                    <template slot="title">
                        <!--            刷新-->
                    </template>
                    <el-button size="small" icon="el-icon-refresh" circle @click="toIndex"></el-button>
                </a-tooltip>

            </div>
        </el-row>
        <el-table
            :data="posts"
            id="lzy"
            border
            style="width: 100%"
            @selection-change="selectChange">
            <el-table-column
                @selection-change="handleSelectionChange"
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                label="岗位编号"
                width="170">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.postId }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="岗位编码"
                width="170">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.postCode }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="岗位名称"
                width="170">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.postName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="岗位排序"
                width="170">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.postSort }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="状态"
                width="170">
                <template slot-scope="scope">
                    <span style="margin-left: 10px" v-if="scope.row.status == 0">正常</span>
                    <span style="margin-left: 10px" v-if="scope.row.status != 0">停用</span>
                </template>
            </el-table-column>
            <el-table-column
                label="创建时间"
                width="180">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button icon="el-icon-edit" type="text" @click="showPost(scope.row),dialogPostVisible=true">编辑</el-button>
                    <el-button icon="el-icon-delete" @click="tips(scope.row.postId)" type="text">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination class="page"
                       background
                       @current-change="loadPost"
                       layout="prev, pager, next"
                       :total="pages*10">
        </el-pagination>

        <el-dialog title="添加岗位" :visible.sync="dialogPostVisible" @click="addPost" class="addRoleDialog">
            <el-form label-width="100px" v-model="post"  ref="form">
                <el-form-item label="岗位名称" :required="true">
                    <el-input v-model="post.postName"  placeholder="请输入岗位名称" prop="postName"></el-input>
                </el-form-item>
                <el-form-item label="岗位编码" :required="true">
                    <el-input v-model="post.postCode" placeholder="请输入岗位编码" prop="postCode"></el-input>
                </el-form-item>
                <el-form-item label="岗位顺序" :required="true">
                    <el-input-number class="num" v-model="post.postSort" prop="postSort" controls-position="right" :min="1" :max="10"></el-input-number>
                </el-form-item>
                <el-form-item label="岗位状态">
                    <el-radio class="radio" v-model="post.status" label="0">正常</el-radio>
                    <el-radio class="radio" v-model="post.status" label="1">停用</el-radio>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="post.remark">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="dialogPostVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveSysPost('form')">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import * as XLSX from "xlsx";
import FileSaver from "file-saver";

export default {
    name: "postManagement",
    data() {
        return {
            topInputShow:true,
            posts: "",
            postCode:"",  //获取岗位编码文本框里面的值
            postName:"",   //获取岗位名称文本框的值
            status:"", //获取状态的下拉框的值
            multiple: false, // 非多个禁用
            checkList:null,
            current: 1,
            size: 5,
            pages: 0,
            dialogRoleVisible:false,    //默认添加角色的弹框为false
            post:{
                postId:"",
                postCode:"",
                postName:"",
                postSort:"",
                status:"",
                createBy:"",
                createTime:"",
                updateBy:"",
                updateTime:"",
                remark:""
            },
            dialogPostVisible:false,
            stateDictList:[]
        }
    },
    methods: {
        loadPost(current) {
            this.current = current;
            this.axios.get("post-page?current=" + this.current + "&size=" + this.size + "&postCode=" + this.postCode + "&postName=" + this.postName + "&status=" + this.status)
                .then(res => {
                    this.posts = res.data.data.records;
                    this.pages = res.data.data.pages;
                })
        },
        //删除判断
        tips(id) {
            this.id = id;
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!',
                });
                this.deletePost(id);
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        topInputShows(){
            this.topInputShow= !this.topInputShow;
        },
        toIndex(){
            this.$router.go(0)
        },
        selectUpdate(){
            this.axios.get("postUpdate/"+this.ids)
                .then(result =>{
                    console.log(result.data.data)
                    this.post = result.data.data;
                })
            this.dialogPostVisible = true;
        },
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.postId)
            this.single = selection.length != 1
            this.multiple = !selection.length
        },
        outExe(){
            this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {

                    this.exportExcel();
                })
                .catch(() => {});
        },
        exportExcel() {
            //转换成excel时，使用原始的格式
            var xlsxParam = { raw: true };
            let fix = document.querySelector(".el-table__fixed");
            let wb;
            //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
            if (fix) {
                wb = XLSX.utils.table_to_book(
                    document.querySelector("#lzy").removeChild(fix),xlsxParam);
                document.querySelector("#lzy").appendChild(fix);
            } else {
                wb = XLSX.utils.table_to_book(document.querySelector("#lzy"),xlsxParam);
            }
            var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array",
            });
            try {
                FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"导出详情单.xlsx");
            } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
            }
            return wbout;
        },

        showPost(post){
            this.post = JSON.parse(JSON.stringify(post));
        },
        addPost(){
            this.nullPost();
            this.dialogPostVisible = true;
        },
        deletePost(id){
            this.axios.delete("post/" + id)
                .then(res => {
                    if(res.data.code == 200){
                        this.loadPost(this.current);
                    }
                })
        },
        selectChange(selection){
            this.ids = selection.map(item => item.postId)
        },
        deleteRoles() {
            console.log(this.ids)
            this.axios.delete("posts/" + this.ids)
                .then(res => {
                    if (res.data.code == 200) {
                        this.loadPost(this.current);
                    }
                })
        },
        //   根据字典类型名称获取字典数据
        loadStateDictList() {
            this.axios.get("/sysDictData/getBySysDictTypeName/" + "sys_normal_disable")
                .then(result => {
                    this.stateDictList = result.data.data
                })
        },

        saveSysPost(){
            if (this.post.postId == 0){
                this.axios.post("/post",this.post)
                    .then(res =>{
                        if (res.data.code == 200){
                            this.loadPost(this.current);
                            this.dialogPostVisible = false;
                        }
                    })
            }else{
                this.axios.put("/post",this.post)
                    .then(res => {
                        if (res.data.code == 200){
                            this.loadPost(this.current);
                            this.dialogPostVisible = false;
                        }
                    })
            }
            this.nullPost();
        },

        nullPost() {
            this.post = {
                postId: "",
                postCode: "",
                postName: "",
                postSort: "",
                status: "",
                createBy: "",
                createTime: "",
                updateBy: "",
                updateTime: "",
                remark: "",
            }
        }
    },

    mounted() {
        this.loadPost(1);
        //   获取菜单状态字典
        this.loadStateDictList()
    }

}
</script>

<style scoped>
.page{
    float: right;
    margin-top: 30px;
}
.btn{
    float: left;
    margin-bottom: 10px;
    margin-top: 20px;
}
.btn-circle{
    float: right;
}
.demo-form-inline{
    position: relative;
    left: -240px;
}
.addRoleDialog{
    width: 1000px;
    position: absolute;
    left: 380px
}
.num{
    position: relative;
    left: -90px;
}
.radio{
    position: relative;
    left: -90px;
}
/deep/ .el-input__inner {
    height: 32px;

}
</style>